<mat-card>
  <mat-card-header>
    <mat-card-title>Create Screen</mat-card-title>
    <mat-card-subtitle>Create a new Screen which can be used to play videos on</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-horizontal-stepper [linear]="true" #stepper>
      <mat-step [stepControl]="screenForm">
        <form [formGroup]="screenForm">
          <ng-template matStepLabel>Enter details</ng-template>
          <mat-form-field>
            <input matInput placeholder="Name" formControlName="name" required>
            <mat-hint>The name is for you to better distinct between screens and <strong>must be unique!</strong></mat-hint>
            <mat-error>Please enter a name</mat-error>
          </mat-form-field>
          <div style="padding-bottom: 5px; padding-top: 20px;">
            <mat-checkbox matTooltip="whether to always show the screen even if no video is playing" formControlName="alwaysOn">Always On</mat-checkbox>
          </div>

          <div>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step [stepControl]="renderTargetForm">
        <form [formGroup]="renderTargetForm">
          <ng-template matStepLabel>RenderTarget Settings</ng-template>
          <mat-checkbox formControlName="is3DRendered">Is 3D Rendered</mat-checkbox>
          <div *ngIf="renderTargetForm.get('is3DRendered').value === false">
            <mat-form-field>
              <input matInput matTooltip="The name of the model to which the rendertarget belongs" placeholder="Model-Name" formControlName="modelName"
                     [appEnableControl]="renderTargetForm.get('is3DRendered').value === false" required>
              <mat-error>Please enter a name</mat-error>
            </mat-form-field>
            <mat-form-field style="padding-left: 5px;">
              <input matInput placeholder="RenderTarget Name" formControlName="renderTargetName"
                     [appEnableControl]="renderTargetForm.get('is3DRendered').value === false" required>
              <mat-error>Please enter a valid renderTarget</mat-error>
            </mat-form-field>
          </div>
          <div *ngIf="renderTargetForm.get('is3DRendered').value === true">
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="positionX" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter X Position</mat-error>
                <mat-label>Position X</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="positionY" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter Y Position</mat-error>
                <mat-label>Position Y</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="positionZ" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter Z Position</mat-error>
                <mat-label>Position Z</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="rotationX" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter X Rotation</mat-error>
                <mat-label>Rotation X</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="rotationY" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter Y Rotation</mat-error>
                <mat-label>Rotation Y</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="rotationZ" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter Z Rotation</mat-error>
                <mat-label>Rotation Z</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="scaleX" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter X Scale</mat-error>
                <mat-label>Scale X</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="scaleY" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter Y Scale</mat-error>
                <mat-label>Scale Y</mat-label>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field>
                <input type="number" matInput formControlName="scaleZ" required
                       [appEnableControl]="renderTargetForm.get('is3DRendered').value === true">
                <mat-error>Please enter Z Scale</mat-error>
                <mat-label>Scale Z</mat-label>
              </mat-form-field>
            </div>
          </div>
          <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step [stepControl]="soundForm">
        <form [formGroup]="soundForm">
          <ng-template matStepLabel>Sound Settings</ng-template>
          <div style="margin-top: 20px;">
            <em>Global Volume</em>
            <mat-slider [max]="100" [min]="1" thumbLabel step="1" value="100"
                        formControlName="globalVolume"></mat-slider>
            {{soundForm.get('globalVolume').value}}
          </div>
          <div>
            <mat-checkbox formControlName="is3DAudioEnabled">Use 3D Audio</mat-checkbox>
          </div>
          <div *ngIf="soundForm.get('is3DAudioEnabled').value === false">
          <div>
            <em>Sound Attenuation</em>
            <mat-slider [max]="100" [min]="1" thumbLabel step="1" value="5"
                        formControlName="soundAttenuation"></mat-slider>
            {{soundForm.get('soundAttenuation').value}}
          </div>
          <div>
            <em>Sound Min. Distance</em>
            <mat-slider [min]="1" [max]="250" step="1" thumbLabel value="10"
                        formControlName="soundMinDistance"></mat-slider>
            {{soundForm.get('soundMinDistance').value}}
          </div>
          <div>
            <em>Sound Max. Distance</em>
            <mat-slider [min]="1" [max]="1000" step="10" thumbLabel value="100"
                        formControlName="soundMaxDistance"></mat-slider>
            {{soundForm.get('soundMaxDistance').value}}
          </div>
          </div>
          <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-raised-button color="primary"  (click)="createScreen()">Submit</button>
          </div>
        </form>
      </mat-step>
    </mat-horizontal-stepper>

  </mat-card-content>
</mat-card>
